import React from 'react'
import Rate from 'components/rate'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../reducers'
import {actions as EAction} from '../../reducers/evaluate'
import {actions as PAction} from '../../reducers/project'
import utils from '../../common/utils'
import { get } from '../../axios'

class Comment extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            evaluate: {},
            type: 'publish',
            opposite_type: 'execute',
            opposite_comment: [],
            project_id: 0,
            id: 0
        }
    }

    componentDidMount() {
        let type = utils.getQueryString('type'),
            id = utils.getQueryString('id', window.location.search),
            project_id = utils.getQueryString('project_id'),
            opposite_type = type == 'publish' ? 'execute' : 'publish'
        
        
        this.setState({type, opposite_type, project_id, id})
        this.props.get_columns()
        this.props.get_comment(project_id, type)
        this.get_comment(project_id, opposite_type)
        this.props.get_project_detail(id, type)
    }

    componentWillReceiveProps(nextProps) {
        let {project_id, type, id} = this.state

        if (nextProps.refresh&&!this.props.refresh ) {
            console.log('fff')
            this.forceUpdate()
            this.props.get_comment(project_id, type)
            this.props.get_project_detail(id, type)
            this.props.change_refresh(false)
        }
    }

    get_comment(project_id, role) {
        get(`/mem/project-evaluate/${project_id}/${role}`).then(
            resp => {
                if (resp.success) {
                    this.setState({opposite_comment: resp.data})
                }
            }
        )
    }
    //handle rate change
    handChange = (v, id) => {
        let _state = this.state.evaluate
        _state[id] = v
        this.setState({evaluate: _state})
    }

    renderP(role, project, opposite=false) {
        const rules = {
            execute: '需求方',
            publish: '执行方'
        },
        rules2 = {
            execute: project.execute_has_evaluate,
            publish: project.publish_has_evaluate
        }
        if (rules2[role]=='yes') {
            if (!opposite)
                return <p>您已对{rules[role]}作出评价</p>
            else 
                return <p>{rules[role]}已对您作出评价</p>
        }
        return <p>请您对{rules[role]}作出评价</p>
    }

    submit = () => {
        let project_id = utils.getQueryString('project_id')
        console.log(JSON.stringify(this.state.evaluate))
        this.props.submit_comment(this.state, project_id)
    }

    render() {
        const { columns, project, comment } = this.props,
                data = comment[0] ? comment : columns,
                has_evaluate = Boolean(comment[0]),
                opposite_comment = this.state.opposite_comment
       
        return(
            <React.Fragment>
                {/* 对对方的评价 */}
                <div class="tabs-4" ref='evaluate_tab'> 
                    {this.renderP(this.state.type, project)}
                    <div class="bs-list">
                    {
                        data.filter(x=>x.category=='rank').map(x=>
                            <div class="evaluate" key={x.id}>
                                <div class="bs">{x.name}</div>
                                <Rate
                                    value={x.content||this.state.evaluate[x.id]}
                                    count={6}
                                    disabled={has_evaluate}
                                    onChange={(value)=>this.handChange(value, x.id)}
                                />
                            </div>
                        )
                    }
                    </div>
                    {
                        data.filter(x=>x.category=='text').map(x=>
                            <div class="textarea" key={x.id}>
                                <textarea placeholder={x.name}
                                value={x.content?x.content:this.state.evaluate[x.id]}
                                disabled={has_evaluate}
                                onChange={(e)=>this.handChange(e.target.value, x.id)}
                                ></textarea>
                            </div>
                        )
                    }
                </div>
                {/* 对方对您的评价 */}
                {
                    has_evaluate&&opposite_comment[0] ? 
                    <div class="tabs-4" ref='evaluate_tab'> 
                    {this.renderP(this.state.type, project, true)}
                    <div class="bs-list">
                    {
                        opposite_comment.filter(x=>x.category=='rank').map(x=>
                            <div class="evaluate" key={x.id}>
                                <div class="bs">{x.name}</div>
                                <Rate
                                    value={x.content}
                                    count={6}
                                    disabled={true}
                                />
                            </div>
                        )
                    }
                    </div>
                    {
                        opposite_comment.filter(x=>x.category=='text').map(x=>
                            <div class="textarea" key={x.id}>
                                <textarea placeholder={x.name}
                                value={x.content}
                                disabled={true}
                                ></textarea>
                            </div>
                        )
                    }
                </div>
                    : null
                }

                <div className="btns">
                    {has_evaluate?null:<a className="contact" onClick={this.submit}>提交</a>}
                </div>
            </React.Fragment>
        )
    }
}

function mapStateToProps(state) {
    return {
      columns: state.evaluate.columns,
      project: state.project.detail,
      comment: state.evaluate.comment,
      refresh: state.evaluate.refresh
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return  {
      get_columns: bindActionCreators(EAction.get_columns, dispatch),
      submit_comment: bindActionCreators(EAction.submit_comment, dispatch),
      get_comment: bindActionCreators(EAction.get_comment, dispatch),
      get_project_detail: bindActionCreators(PAction.get_detail, dispatch),
      change_refresh: bindActionCreators(EAction.change_refresh, dispatch)
    }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Comment)